<template>
	<div id="div9">
		<table style="width: 100%; border-color: #ccc;" border="1" cellpadding="0" cellspacing="0">
			<tr class="tr1">
				<td>名称</td>
				<td>介绍名称</td>
				<td>标签</td>
				<td>优惠券类型</td>
				<td>最低消费</td>
				<td>优惠面值</td>
			</tr>
			<tr class="tr2">
				<td>{{name.name}}</td>
				<td>{{name.desc}}</td>
				<td>{{name.tag}}</td>
				<td v-if="name.type==0">通用领劵</td>
				<td v-if="name.type==1">注册领劵</td>
				<td v-if="name.type==2">悦换码</td>
				<td>满{{name.min}}元可使用</td>
				<td>免减{{name.discount}}元</td>
			</tr>
			<tr class="tr1">
				<td>每人限领</td>
				<td>当前状态</td>
				<td>商品范围</td>
				<td>有效期</td>
				<td>优惠悦换码</td>
				<td>发行数量</td>
			</tr>
			<tr class="tr2">
				<td>{{name.limit}}</td>
				<td v-if="name.status==0">正常</td>
				<td v-if="name.status==1">过期</td>
				<td v-if="name.status==2">已下架</td>
				<td v-if="name.goodsType==0">全场通用</td>
				<td v-if="name.goodsType==1">指定分类</td>
				<td v-if="name.goodsType==2">指定商品</td>
				<td>领取{{name.days}}天有效</td>
				<td></td>
				<td v-if="name.total==0">不限</td>
				<td v-if="name.total!=0">{{name.total}}</td>
			</tr>
		</table>
		<el-row class="role-head">
			<el-input placeholder="请输入用户ID" v-model="inpName" clearable></el-input>
			<el-select v-model="value" placeholder="请选择使用状态" clearable>
				<el-option v-for="item in lists" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" @click="searchUser">查找</el-button>
		</el-row>
		<!-- 表格 -->
		<template>
			<el-table :key="Math.random()" :data="tableData" style="width: 100%" border
				:header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign:'center'}">
				<el-table-column label="用户优惠券ID" prop="id" sortable>
				</el-table-column>
				<el-table-column label="用户ID" prop="">
				</el-table-column>
				<el-table-column label="领取时间" prop="">
				</el-table-column>
				<el-table-column label="使用状态" prop="">
				</el-table-column>
				<el-table-column label="订单ID" prop="">
				</el-table-column>
				<el-table-column label="使用时间" prop="">
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	import {
		couponRead
	} from '../../utils/axios.js'
	export default {
		data() {
			return {
				id: '',
				name: '',
				lists: [ //搜索框2
					{
						value: 0,
						label: '未使用'
					},
					{
						value: 1,
						label: '正常'
					},
					{
						value: 2,
						label: '已过期'
					},
					{
						value: 3,
						label: '已下架'
					}
				],
				inpName: '', //用户ID
				value: '', //
				tableData: [],
			}
		},
		mounted() {
			console.log(this.$route.query.id)
			// this.id = parseInt(this.$route.query.id)
			this.id = parseInt(Cookies.get('id'))
			this.list()
		},
		methods: {
			list() {
				console.log(this.id)
				let id = {
					id: this.id
				}
				couponRead(id).then(res => {
					console.log(res)
					this.name = res.data.data
				})
			},
			searchUser() {

			}
		},

	}
</script>

<style scoped="scoped" lang="less">
	.tr1 {
		text-align: center;
		background-color: #F2F6FC;

		td {
			width: 16.6%;
			padding: 10px;
		}
	}

	.tr2 {
		text-align: center;

		td {
			width: 16.6%;
			padding: 20px 10px;
		}
	}

	.role-head {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;

		.el-input {
			width: 200px;
			margin-right: 5px;
		}
	}

	.el-select {
		margin-right: 5px;
	}
</style>
